<template>
  <div class="collection-detail">
    <detail-card>
      <detail-card-item title="基本信息" :sign="$route.query.id">
        <div class="basic-info">
          <div class="basic-info-container">
            <el-form label-width="8em">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="申请人：">{{ basicInfo.applicant }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="申请时间：">{{ basicInfo.applicationDate }}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="回款类型：">{{ formatCollectionType(basicInfo.collectionType) }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属项目：">{{ basicInfo.projectName }}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="客户名称：">{{ basicInfo.projectCustomer }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户经理：">{{ basicInfo.customerManager }}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="申请标题：">{{ basicInfo.applicationTitle }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="应收金额(元)：">{{ $currency(basicInfo.amountReceivable) }}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="申请备注：">
                    <pre>{{ basicInfo.remarks || '无' }}</pre>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="basic-info-icon">
            <img :src="statusImgUrl" alt="">
          </div>
        </div>
      </detail-card-item>
      <detail-card-item title="决算详情">
      </detail-card-item>
      <detail-card-item title="计划列表">
        <el-table :data="payColSchInfoList">
          <el-table-column width="180" align="center" label="序号" prop="orderNum"></el-table-column>
          <el-table-column width="200" align="center" label="回款时间" prop="collectionDate"></el-table-column>
          <el-table-column width="200" align="center" label="回款计划名称" prop="scheduleName"></el-table-column>
          <el-table-column width="200" align="center" label="应收金额(元)" prop="money">
            <template v-slot="{row}">
              <div>{{ $currency(row.money) }}</div>
            </template>
          </el-table-column>
        </el-table>
      </detail-card-item>
      <detail-card-item title="审批流程">
      </detail-card-item>
      <detail-card-item title="抄送人">
      </detail-card-item>
    </detail-card>
  </div>
</template>

<script>
import {apiGetCollectionInfo} from "@/api/process-control-platform/sale/collectionPlan";
import DetailCard from "@/components/DetailCard/DetailCard.vue";
import DetailCardItem from "@/components/DetailCard/DetailCardItem.vue";

// 审核状态字典  1-待审批 2-审批中 3-已通过 4-未通过 5-已撤销
const verifyFlagMap = {
  1: 'pending.png',
  2: 'underReview.png',
  3: 'approve.png',
  4: 'notPass.png',
  5: 'revoked.png',
}
// tab映射字典
const tabMap = {
  1: '合同回款',
  2: '保证金回款',
  3: '其他回款',
  4: '项目决算',
}

export default {
  name: "collection-detail",
  components: {DetailCard, DetailCardItem},
  data() {
    return {
      basicInfo: {},
      payColSchInfoList: []
    }
  },
  computed: {
    statusImgUrl() {
      return this.basicInfo.verifyFlag && require('@/assets/process-control-platform/sale/collectionPlan/' + verifyFlagMap[this.basicInfo.verifyFlag])
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      apiGetCollectionInfo(this.$route.query.id).then(res => {
        if (res.code !== 200) return
        this.basicInfo = res.data.payColSchAppListVo
        this.payColSchInfoList = res.data.payColSchInfoList
      })
    },

    // 格式化回款类型
    formatCollectionType(type) {
      return tabMap[type]
    }
  }
}
</script>

<style scoped lang="scss">
.collection-detail {
  padding: 20px;

  .basic-info {
    display: flex;
    align-items: center;

    &-container {
      flex: 1;

      ::v-deep {
        .el-form-item {
          margin-bottom: 0;
        }

        .el-form-item__label {
          font-weight: 900;
          color: #333333;
        }

        .el-form-item__content {
          font-weight: 400;
          color: #333333;
        }
      }

      pre {
        margin: 0;
        padding: 0;
      }
    }

    &-icon {
      flex-shrink: 0;
      width: 95px;
      height: 85px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
